import React, { useRef, useState } from 'react';
import Header from './header';
import { observer } from 'mobx-react';
import useStores from '../../store';
import Search from './search';
import HyperSpeed from '@c/HyperSpeed';
import SpotlightCard from '@c/SpotlightCard';
import Welcome from './welcome';
import SplashCursor from '@c/SplashCursor';
import Footer from './footer';
import Navigation from './navigation';
import LoginModal from '../login';

import { useGSAP } from '@gsap/react';
import ScrollTrigger from 'gsap/ScrollTrigger';
import gsap from 'gsap';

gsap.registerPlugin(useGSAP, ScrollTrigger);

function Index() {
  const { search, globalStore } = useStores();
  const { searchVisible } = search;
  const { showLoginModal } = globalStore;
  const main = useRef();

  return (
    <div
      className="content-container flex flex-col text-new-text dark:text-new-text-dark bg-new-bg dark:bg-new-bg-dark relative"
      ref={main}
    >
      {/* <SplashCursor /> */}

      {/* header */}
      <Header />

      {/* content */}

      <div className="pt-24 no-scrollbar">
        {/* <Welcome></Welcome>
        <NasStatus></NasStatus> */}

        <div className="w-screen h-screen relative">
          <Welcome></Welcome>
          {/* <SpotlightCard className="relative z-50 mt-48" spotlightColor="rgba(0, 229, 255, 0.2)">
            <div className="w-[500px] h-[600px]  border-2 border-red-500 bg-white">123123</div>
          </SpotlightCard> */}
        </div>

        <Navigation></Navigation>

        <div className=" h-[1000px]"></div>
      </div>

      {/* footer */}
      <Footer></Footer>
      {searchVisible && <Search />}
      <LoginModal />
    </div>
  );
}

export default observer(Index);
